<template>
<!--    外边盒子-->
    <div class="outer">
<!--       版心 -->
        <div class="mid" @click="toLogin">
            <div class="left" style="overflow: hidden">
                <span v-if="!$store.state.isLogin">
                    <van-icon name="user-circle-o"  size="100" color="rgb(255,255,255)"/>
                </span>
                <span v-else>
                    <img :src="$store.state.userInfo.avatar" alt="" style="width: 100%;height: 100%;
        border-radius: 100%;" >
                </span>

            </div>
            <div class="right">
<!--                昵称-->
                <div class="nickName">
                    <span v-if="!$store.state.isLogin">立即登录</span>
                    <span v-else>{{this.$store.state.userInfo.loginName}}</span>

                </div>
<!--                图标-->
                <div class="tuBiao">
                    <van-icon color="white" name="arrow" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Top",
        data(){
            return{
                flag:this.$store.state.isLogin,
            }
        },
        methods:{
            toLogin(){
                if(!this.$store.state.isLogin){
                    this.$router.push(
                        {
                            path:"/login",
                        }
                    );
                }
            }
        },
        created(){
            console.log(this.flag)
            console.log(this.$store.state.isLogin)
            this.$store.dispatch("asyncChangeLogin");
        }
    }
</script>

<style scoped>
    .outer {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        background-color: rgb(62,62,62);
    }
    .mid {
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: 80%;
        /*background-color: #42b983;*/
    }
    .left {
        width: 40%;
        height: 60%;
        border-radius: 60%;
        /*background-color: white;*/
    }
    /*.left>span{*/
    /*    width: 100%;*/
    /*    height: 100%;*/
    /*}*/
    .right {
        width: 60%;
        height: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
        /*background-color: #42b983;*/
    }
    .right>.nickName{
        width: 80%;
        height: 20%;
        color: white;
    }
    .right>.tubiao{
        height: 20%;
        width: 20%;
    }
</style>